<template>
  <div id="app" :style="background">
    <NavBar></NavBar>
    <div class="container-fluid">
      <div class="row">
        <!--<SideBar></SideBar>-->
        <ContentBoard></ContentBoard>
      </div>
    </div>
    <NewRoom :outDoor="out" @commit="login"></NewRoom>
    <FriendBar></FriendBar>
  </div>
</template>

<script>
import _ from 'lodash'
import { createOfferPeer, createAnswerPeer } from './static/utils'
import NavBar from './components/NavBar'
import FriendBar from './components/FriendBar'
import SideBar from './components/SideBar'
import ContentBoard from './components/ContentBoard'
import SignIn from './components/SignIn'
import NewRoom from './components/NewRoom'
// import { mq } from './components/mq'
import { mapMutations } from 'vuex'
/* eslint-disable */
export default {
  name: 'app',
  components: {
    NavBar,
    SideBar,
    ContentBoard,
    SignIn,
    NewRoom,
    FriendBar
  },
  data () {
    return {
      background:'',
      out:true
    }
  },
  methods:{
    login({roomName,userName}){
      var vm = this;
      vm.$socket.emit('login',{roomName,userName},function(err,msg){
          if(err)
              console.log(err);
          else{
              vm.out = false;
              vm.setRoomName(roomName);
              vm.saveLoginfo({userName,name:userName,...msg});
              _.each(msg.friends,f=>{
                var ping = createOfferPeer(null,function({ice}){
                      console.log('ice-pong2:',f,ice);
                      vm.$socket.emit('ice',{to:f.name,type:'pong',ice:ice});
                    },function({sdp}){
                      console.log('offer2:',f,sdp);
                      vm.$socket.emit('offer',{to:f.name,sdp:sdp});
                    },function(err){
                      console.log(err);
                    });
                vm.friendOffer({name:f.name,ping:ping});
              })
          }
      });
    },
    ...mapMutations(['setRoomName','setRemoteStream','saveLoginfo','setLocalPeer','friendLogout','friendLogin','friendOffer','friendAnswer'])
  },
  sockets: {
    offline (friend){
      this.friendLogout(friend);
    },
    online (friend){
      var vm = this;
      var peer = createOfferPeer(null,function({ice}){
            console.log('ice-pong2:',friend,ice);
            vm.$socket.emit('ice',{to:friend.name,type:'pong',ice:ice});
          },function({sdp}){
            console.log('offer2:',friend,sdp);
            vm.$socket.emit('offer',{to:friend.name,sdp:sdp});
          },function(err){
            console.log(err);
          });
      this.friendLogin(friend);
      this.friendOffer({name:friend.name,ping:peer});
    },
    offer (remote) {
      var vm = this;
      var pong = createAnswerPeer(null,remote.sdp,function({ice}){
        console.log('ice-ping2:',remote,ice);
        vm.$socket.emit('ice',{to:remote.from,type:'ping',ice:ice});
      },function({sdp}){
        console.log('answer2:',remote,sdp);
        vm.$socket.emit('answer',{to:remote.from,sdp:sdp});
      },function(err){
        console.log(err);
      });
      pong.onaddstream = function(event){
        console.log('receive stream4:',remote.from);
        vm.setRemoteStream(event.stream);
      };
      this.friendOffer({name:remote.from,ping:null,pong});
    },
    answer (remote) {
      this.friendAnswer({name:remote.from,sdp:remote.sdp});
    },
    ice (remote) {
      this.friendICE({name:remote.from,ice:remote.ice});
    }
  },
  created(){
    var vm = this;
    vm.$store.dispatch('OpenCamera');
    vm.$http.get('/rcn/mm').then(function(res){
      if(res.body.id < 0) return;
      vm.background = "background:url('/rcn/mm/"+res.body.id+'.jpg'+"') center top;;background-size:cover;"
      vm.$store.commit('setBackmmUrl','/rcn/mm/'+res.body.id+'.jpg');
    })
  }
}
</script>

